<!DOCTYPE html>
<html>

<head>
	<title>Adaptive Cards Designer</title>
	<script src="https://unpkg.com/adaptivecards@latest/dist/adaptivecards.min.js"></script>
	<script src="https://unpkg.com/adaptive-expressions@4/lib/browser.js"></script>
	<script src="https://unpkg.com/adaptivecards-templating@latest/dist/adaptivecards-templating.min.js"></script>

	<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.min.js"></script>

	<style type="text/css">
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
		}
	</style>

	<script src="adaptivecards-designer.js"></script>
	<script type="text/javascript">
		window.onload = function () {
			ACDesigner.GlobalSettings.enableDataBindingSupport = false;
			ACDesigner.GlobalSettings.showDataStructureTooklbox = false;
			ACDesigner.GlobalSettings.showSampleDataEditorToolbox = false;
			ACDesigner.GlobalSettings.showSampleHostDataEditorToolbox = false;
			ACDesigner.GlobalSettings.showVersionPicker = false;

			if (!ACDesigner.SettingsManager.isLocalStorageAvailable) {
				console.log("Local storage is not available.");
			}


			// Prepare a list of host containers
			// This is not required. When no list is passed (empty array or null), the designer
			// uses a default built-in host container, and the host container picker in the
			// toolbar is hidden.
			let hostContainers = ACDesigner.defaultMicrosoftHosts;

			let designer = new ACDesigner.CardDesigner(hostContainers);

			// Change where the designer looks for assets like CSS and container images
			//designer.assetPath = "http://localhost:8080/";

			/* Here's how to add buttons to the toolbar:

			let myButton = new ACDesigner.ToolbarButton(
				"myButton",
				"My button",
				null,
				(sender) => { alert("My button was clicked"); });
			myButton.separator = true;
			designer.toolbar.insertElementAfter(myButton, ACDesigner.CardDesigner.ToolbarCommands.HostAppPicker);


			// NOTE: Adding toolbar elements must be done BEFORE the designer is attached


			/* Here's how to collapse certain panes by default:

			designer.treeViewPane.collapse();
			designer.jsonEditorPane.collapse();
			*/

			/* Here's how to set the card payload in the designer:

			designer.setCard(
				{
					type: "AdaptiveCard",
					version: "1.0",
					body: [
						{
							type: "TextBlock",
							text: "Hello world"
						}
					]
				}
			);
			*/

			// NOTE: Collapsing panes/setting the card payload must be done AFTER the designer is attached
			// Initialize monaco-editor for the JSON-editor pane.

			require.config({
				paths: {
					'vs': 'https://unpkg.com/monaco-editor@0.17.1/min/vs'
				}
			});
			require(['vs/editor/editor.main'], function () {
				designer.monacoModuleLoaded();
			});

			designer.attachTo(document.getElementById("designerRootHost"));

		};
	</script>
</head>

<body>
	<div style="font-family: 'Segoe UI', sans-serif; font-size: 14px; display: flex; flex-direction: column; height: 100vh;">
		<div id="designerRootHost"></div>
	</div>
</body>

<!-- load monaco loader after designer is loaded so that it doesn't affect the designer code -->
<script src="https://unpkg.com/monaco-editor@0.17.1/min/vs/loader.js"></script>


</html>
